<script lang="ts" setup>
  import { SmileOutlined } from '@ant-design/icons-vue';
  import Alert from '@sscd/alert';
</script>

<template>
  <div class="demo">
    <div class="demo-title">自定义图标</div>
    <div class="demo-content">
      <Alert message="showIcon = false" type="success">
        <template #icon><SmileOutlined /></template>
      </Alert>
      <Alert class="mt12" message="Success Tips" type="success" show-icon>
        <template #icon><SmileOutlined /></template>
      </Alert>
      <Alert class="mt12" message="Informational Notes" type="info" show-icon>
        <template #icon><SmileOutlined /></template>
      </Alert>
      <Alert class="mt12" message="Warning" type="warning" show-icon>
        <template #icon><SmileOutlined /></template>
      </Alert>
      <Alert class="mt12" message="Error" type="error" show-icon>
        <template #icon><SmileOutlined /></template>
      </Alert>
      <Alert
        class="mt12"
        message="Success Tips"
        description="Detailed description and advices about successful copywriting."
        type="success"
        show-icon
      >
        <template #icon><SmileOutlined /></template>
      </Alert>
      <Alert
        class="mt12"
        message="Informational Notes"
        description="Additional description and informations about copywriting."
        type="info"
        show-icon
      >
        <template #icon><SmileOutlined /></template>
      </Alert>
      <Alert
        class="mt12"
        message="Warning"
        description="This is a warning notice about copywriting."
        type="warning"
        show-icon
      >
        <template #icon><SmileOutlined /></template>
      </Alert>
      <Alert
        class="mt12"
        message="Error"
        description="This is an error message about copywriting."
        type="error"
        show-icon
      >
        <template #icon><SmileOutlined /></template>
      </Alert>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .mt12 {
    margin-top: 12px;
  }
</style>

